<template>
    <div id="chat">
        <nut-row>
            <nut-col :span="24">
                <div>
                    <nut-navbar class="bg" @on-click-back="back">
                        聊天列表
                        <a slot="more-icon">聊天历史</a>
                    </nut-navbar>
                </div>
            </nut-col>
        </nut-row>

        <nut-row >
            <nut-col :span="24">
                <nut-scroller
                        ref="msgbox"
                        :is-un-more="isUnMore1"
                        :is-loading="isLoading1"
                        :type="'vertical'"
                        :scrollTo="scrollTo"
                        @scrollToCbk="scrollToCbk"
                >
                    <div slot="list">
                        <div v-for="(item,index) in message" :key="index">
                            <div class="content" v-if="item.direction === 'left'">
                                <div class="content-avatar">
                                    <img :src="item.avatar" alt="头像">
                                </div>
                                <div class="content-desc">
                                    <div class="content-desc-name">{{item.name}}</div>
                                    <div class="content-desc-content">
                                        <div v-show="item.content != '' ">{{item.content}}</div>
                                        <div v-show="item.pic != '' "><img width="160" height="80" :src="item.pic" alt=""></div>
                                    </div>
                                </div>
                            </div>

                            <div class="content-right" v-if="item.direction === 'right'">
                                <div class="content-avatar-right">
                                    <img :src="item.avatar" alt="头像">
                                </div>
                                <div class="content-desc-right">
                                    <div class="content-desc-name-right">{{item.name}}</div>
                                    <div class="content-desc-content-right">
                                        <div v-show="item.content != '' ">{{item.content}}</div>
                                        <div v-show="item.pic != '' "><img width="160" height="80" :src="item.pic" alt=""></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </nut-scroller>
            </nut-col>
        </nut-row>
        <nut-row class="msg-row">
            <nut-col :span="24">
                <div class="msg-warp">
                    <div class="msg-warp-div">
                        <nut-textinput v-model="content"  placeholder="" @keyup.enter="sendMessage" />
                    </div>
                    <div class="msg-warp-div">
                        <img  width="22" height="22" src="../../assets/iconfont/smile.svg" @click="openimg"/>
                    </div>
                    <div class="msg-warp-div">
                        <nut-uploader
                                :name="pic"
                                :url="url"
                                :headers="headers"
                                @success="demoSuccess"
                        >
                            <img  width="22" height="22" src="../../assets/iconfont/pic.svg" />
                        </nut-uploader>

                    </div>
                    <div class="msg-warp-div" @click="sendMessage">
                        <nut-button
                                class="btnsize"
                                type="primary"
                                shape="circle"
                                small
                        >
                            发送
                        </nut-button>
                    </div>
                </div>
            </nut-col>
        </nut-row>

        <nut-row v-show="iconFlag">
            <nut-col :span="24" >
                <div class="icon-warp" >
                    <div class="icon-warp-div" v-for="(item,index) in iconimg" :key="index">
                        <img  width="20" height="20" src="../../assets/iconfont/开心.svg" />
                    </div>
                </div>
            </nut-col>
        </nut-row>

    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import { FriendInfo } from '@/api/friend'
    import { GetUpload } from '@/api/upload'
    import { MessageAdd, MessageAck, FriendOutLiveMsg } from '@/api/message'
    import { GetCookie } from '@/utils/jscookie'
    import bus from '@/assets/evnetbus'

    // var message = []
    export default {
        name: "chat",
        data() {
            return {
                message: [],
                isUnMore1: false,
                isLoading1: false,
                content: "",
                userinfo: null,  // 当前用户信息
                dstid: '',  // 好友id
                dstinfo: null, // 好友信息
                ws: null,
                iconFlag: false,
                // 图片上传
                url: "",
                pic: "file",
                headers: {},
                scrollTo: 1,
                iconimg: [
                    {},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}
                ]
            }
        },
        comments: {

        },
        computed: {
            ...mapGetters([
                'userInfoStore'
            ])
        },
        created() {
            // this.ws = wsk
            this.dstid = this.$route.query.user_id
            this.userinfo = JSON.parse(GetCookie('_userinfo'))
            this.getFriendInfo()
            this.getOutLiveMsg()
        },
        mounted(){
            this.getUrl()
            var _self = this
            // 接收消息
            bus.$on('receiveMsg', function (data) {
                var dd = JSON.parse(data)
                if (dd.cmd === 11) {
                    // 自己发送的消息回执
                    if (dd.user_id === _self.userinfo.id) {
                        console.log("自己发送ack")
                    }else {
                        console.log("别人给我的ack N")
                        _self.ackMsg(dd.id)
                    }
                }else {
                    // 自己发送的消息回执
                    if (dd.user_id === _self.userinfo.id) {
                        var mss = {
                            id: dd.id,
                            avatar: _self.userinfo.avatar,
                            name: _self.userinfo.name,
                            content: dd.content,
                            pic: dd.pic,
                            direction: "right"
                        }
                        _self.message.push(mss)
                    }else {
                        var ms = {
                            id: dd.id,
                            avatar: _self.dstinfo.avatar,
                            name: _self.dstinfo.name,
                            content: dd.content,
                            pic: dd.pic,
                            direction: "left"
                        }
                        // 发送接收消息ack
                        dd.cmd = 11;
                        bus.$emit("sendMsg", JSON.stringify(dd))
                        _self.message.push(ms)
                    }
                }
            })  
        },
        methods: {
            back() {
                this.$router.back()
            },
            // 获取好友信息
            getFriendInfo() {
                var parmas = {
                    user_id: this.dstid
                };
                FriendInfo(parmas).then(res => {
                    if (res.code === 1) {
                        this.dstinfo = res.data
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 获取离线消息
            getOutLiveMsg() {
                var dd  = {
                    user_id: this.userinfo.id
                }
                FriendOutLiveMsg(dd).then(res => {
                    if (res.code === 1) {
                        var dd = res.data
                        for (var i=0; i< dd.length; i++) {
                            var msg = {
                                id: dd[i].id,
                                name: this.userinfo.name,
                                avatar: this.userinfo.avatar,
                                user_id: dd[i].user_id,
                                cmd: 10,
                                dst_id: dd[i].dst_id,
                                content: dd[i].content,
                                pic: dd[i].pic,
                                direction: "left"
                            };
                            this.message.push(msg)
                        }
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 消息保存
            storeMsg(msg) {
                MessageAdd(msg).then(res => {
                    if (res.code === 1) {
                        bus.$emit("sendMsg", JSON.stringify(msg))
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 消息ack
            ackMsg(id) {
                MessageAck({
                    id : id
                }).then().catch()
            },
            // 消息发送
            sendMessage() {
                var msg = {
                    user_id: this.userinfo.id,
                    cmd: 10,
                    dst_id: parseInt(this.dstid),
                    content: this.content,
                    pic: ''
                };
                this.storeMsg(msg)

                this.content = ""
            },
            getUrl() {
                const token = GetCookie("_token")
                this.headers = {
                    "Authorization": "Bearer " + token
                };
                this.url = GetUpload()
            },
            demoSuccess(file, data) {
               var dd = JSON.parse(data)
                if (dd.code === 1) {
                    var msg = {
                        user_id: this.userinfo.id,
                        cmd: 10,
                        dst_id: parseInt(this.dstid),
                        content: "",
                        pic: dd.data,
                        direction: "right",
                    };
                    this.storeMsg(msg)
                }
            },
            scrollToCbk() {

            },
            // 打开表情
            openimg() {
                if (this.iconFlag === true) {
                    this.iconFlag = false
                }else {
                    this.iconFlag = true
                }
            }
        }
    }
</script>

<style scoped lang="css">
    .bg {
        background: rgb(69, 193, 160);
        color: #FFFFFF;
    }
    .content-right {
        display: flex;
        flex-direction: row-reverse;
        margin: 10px 15px;
    }
    .content-avatar-right {
        width: 30px;
        height: 30px;
    }
    .content-avatar-right img {
        display: block;
        width: 30px;
        height: 30px;
    }
    .content-desc-right{
        padding: 0 10px;
        text-align: right;
    }
    .content-desc-content-right{
        background: greenyellow;
        flex-flow: nowrap;
        padding: 8px 8px;
        text-align: left;
    }
    .content-desc-name-right {
        padding: 0 5px;
    }
    .content {
        display: flex;
        margin: 10px 15px;
    }
    .content-avatar {
        width: 30px;
        height: 30px;
    }
    .content-avatar img {
        display: block;
        width: 30px;
        height: 30px;
    }
    .content-desc{
        padding: 0 10px;
        text-align: left;
    }
    .content-desc-name {
        height: 25px;
        padding: 0 5px;
    }
    .content-desc-content{
        background: gold;
        flex-flow: nowrap;
        padding: 8px 8px;
    }
    .msg-row {
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 0 5px;
        width: 100%;
        height: 48px;
        background: rgb(69, 193, 160);
    }
    .msg-warp {
        display: flex;
        width: 100%;
        height: 48px;
    }
    .msg-warp-div:nth-child(1){
        width: 65%;
        line-height: 48px;
        padding-top: 8px;
    }
    .msg-warp-div:nth-child(2){
        width: 6%;
        line-height: 48px;
        padding-top: 5px;
        padding-left: 5px;
    }
    .msg-warp-div:nth-child(3){
        width: 6%;
        line-height: 48px;
        padding-top: 5px;
    }
    .msg-warp-div:nth-child(4){
        width: 18%;
        line-height: 48px;
        padding-right: 5px;
    }
    .btnsize {
        height: 22px;
    }
    .icon-warp {
        height: 220px;
        display: -webkit-flex; /* Safari */
        display: flex;
        flex-wrap: wrap;
        padding: 15px 0;
        border: greenyellow 1px solid;
        position: fixed;
        bottom: 48px;
        overflow: scroll;
    }
    .icon-warp-div {
        width: 40px;
        height: 40px;
    }
    /deep/.nut-textinput input {
        height: 30px !important;
    }
</style>